<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>mapplic</title>
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<link rel="stylesheet" type="text/css" href="css/mapplic.css">
		<link rel="stylesheet" type="text/css" href="css/map.css">

	</head>
	<body>
	<div id="header"></div>
    <div id="content">
    	  <section id="map-section" class="inner over">
					<div class="editor-window">
						<div class="window-mockup brown"></div>
						<div class="editor-body">
							<code>
								{<br>
								&nbsp;&nbsp;&nbsp;"id": "newlandmark",<br>
								&nbsp;&nbsp;&nbsp;"title": "New Landmark",<br>
								&nbsp;&nbsp;&nbsp;"description": "Creating a new landmark is that easy!",<br>
								&nbsp;&nbsp;&nbsp;"x": "<span class="mapplic-coordinates-x">0.0000</span>",<br>
								&nbsp;&nbsp;&nbsp;"y": "<span class="mapplic-coordinates-y">0.0000</span>",<br>
								&nbsp;&nbsp;&nbsp;...<br>
								}
							</code>
						</div>
					</div>

					<div class="map-container">
						<div class="window-mockup">
							<div class="window-bar"></div>
						</div>
						<!-- Map -->
						<div id="mapplic"></div>
					</div>
      </section>
    </div>
		
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/hammer.min.js"></script>
	<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
	<script type="text/javascript" src="js/script.js"></script>
	<script type="text/javascript" src="js/mapplic.js"></script>
    <script type="text/javascript">
			$(document).ready(function() {
				var mapplic = $('#mapplic').mapplic({
					source: 'data/mall.json',	// Using mall.json file as map data
					sidebar: true, 			// Enable sidebar
					minimap: true, 			// Enable minimap
					markers: false, 		// Disable markers
					fillcolor: false, 		// Disable default fill color
					fullscreen: true, 		// Enable fullscreen 
					maxscale: 3 ,			// Setting maxscale to 3
					developer:true
				});
			});
	</script>

	</body>
</html>
